<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-10-14 09:27:30
 * @LastEditTime: 2019-11-01 17:32:15
 * @LastEditors: Please set LastEditors
 -->
<template>
<div class="container">
<van-nav-bar title="下拉刷新、上拉加载组件" :border="false" left-arrow fixed
    @click-left='$router.push("/")'/>
<scroller  width="50%" style="padding-top: 50px;box-sizing:border-box"
:on-refresh="refresh"
ref="my_scroller_1">
    <div v-for="(item, index) in items1"
        class="row" :class="{'grey-bg': index % 2 == 0}" :key="index"> 
    {{ item }}
    </div>
</scroller>
<scroller  width="50%" style="left: 50%; padding-top: 50px;box-sizing:border-box"
    :on-refresh="refresh2"
    ref="my_scroller_2">
    <div v-for="(item, index) in items2"
          class="row" :class="{'grey-bg': index % 2 == 1}" :key="index">
        {{ item }}
    </div>
</scroller>

</div>
</template>
<script>
export default {
    name:'VueScroll',
    data(){
        return{
            items1: [],
            items2: []
        }
    },
    mounted () {
      for (let i = 1; i <= 20; i++) {
        this.items1.push(i + ' - Scroller 1')
        this.items2.push(i + ' - Scroller 2')
      }
      this.top = [1, 1]
      this.bottom = [20, 20]
    },
    methods:{
        refresh (done) {
            setTimeout(() => {
            let start = this.top[0] - 1
            for (let i = start; i > start - 10; i--) {
                this.items1.splice(0, 0, i + ' - Scroller 1')
            }
            this.top[0] = this.top[0] - 10;
            done()
            }, 1500)
        },
        refresh2 (done) {
            setTimeout(() => {
            let start = this.top[1] - 1
            for (let i = start; i > start - 10; i--) {
                this.items2.splice(0, 0, i + ' - Scroller 2')
            }
            this.top[1] = this.top[1] - 10;
            done()
            }, 1500)
        }
    }
}
</script>
<style lang="less" scoped>
.row{
    height:50px;
    text-align: center;
    line-height: 50px;
    color: #333;
    font-size: 14px;
}
.grey-bg{
    background-color: gray;
    color:#eee;
}
</style>